<template>
  <div class="container">
      <div class="headers">
        <div class="left" @click="goBack">
          <van-icon name="arrow-left" size=".16rem" color="#fff"/>
        </div>
        <div class="right">
          <ul>
            <li> <img src="../../assets/images/video.png" alt @click="bannerMethod" class="li_img"></li>
            <li> <van-icon name="star-o" :class="{'i':iShow==true}" @click="collectMethod" class="right_i"/></li>
            <li><img src="../../assets/images/share.png" alt @click="shareMethod" class="li_img1"></li>
          </ul>
        </div>
      </div>
     <!--<div class="video" @click="playMethod">-->
        <!--<video width="100%" height="100%" preload="auto" ref="myVideo" @ended="endedMethod">-->
          <!--<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">您的浏览器不支持Video标签-->
        <!--</video>-->
        <!--<div class="pic" v-if="isShowPlay">-->
          <!--<img src="../../assets/images/play.png" alt>-->
        <!--</div>-->
      <!--</div>-->
      <div class="banner">
        <!--<van-swipe :autoplay="3000" indicator-color="white">-->
          <!--<van-swipe-item v-for="(i, index) in images" :key="index">-->
            <img :src="initData.slShop.imageUrl" alt="">
          <!--</van-swipe-item>-->
        <!--</van-swipe>-->

      </div>
      <div class="detail">
        <div class="title">
          <div class="name">{{initData.slShop.name}}</div>
          <div class="num">
            <van-rate v-model="rating" color="#01bf47" :size="22" readonly void-color="#cccccc"/>
          </div>
        </div>
        <div class="subtitle">{{initData.slShop.description}}</div>
        <div class="adress">
          <div class="left">
            <img src="../../assets/images/adress2.png" alt>
            <span>{{initData.slShop.address}}</span>
          </div>
        </div>
        <div class="action">
        <div class="left">
          已评价
          <span>{{initData.comment_num}}条</span>
        </div>
        <div class="right" @click="evaluation(initData)">
          <span>查看评价</span>
          <van-icon name="arrow"/>
        </div>
        </div>
      </div>
     <div class="guide">
       <div class="guide_con">
         <p class="guide_con_p">景点游玩指南</p>
       </div>
         <nav id="searchBar" class="searchBar">
           <div v-for="(item,index) in initList" @click="toggle(item)">
             <img :src="item.image_url" alt="">
             <p>{{item.name}}</p>
           </div>
         </nav>
     </div>
      <div class="tab">
        <div class="list">
            <ul>
              <li
                v-for="(item,index) in initList"
                :key="index"
                @click="toGoodsDetail(item)"
              >
                <div class="left">
                  <img :src="item.image_url" alt="">
                </div>
                <div class="center">
                  <div class="title">{{item.name}}</div>
                  <!--<div class="subtitle" v-html="item.detail">{{item.detail}}</div>-->
                  <div class="right">
                    <p class="Sold">已售：{{item.sales_volume}}</p>
                    <div class="price">￥{{item.price}}/人</div>
                  </div>
                  <div class="buy" >立即预订</div>
                </div>

              </li>
            </ul>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: "travelDetails",
    data() {
      return {
        //显示评分分数
        rating: 0,
        //是否显示视频播放按钮
        isShowPlay: true,
        initData: {},
        initList: [],
        finished: false,
        pageNum:1,
        user_id:'10426',
        shareShow:false,
        iShow:false,
        arr:[],
        scenicSpotId: this.$route.query.shopId
      };
    },
    components: {
      // share
    },
    mounted() {
      if(this.$cookies.get('user_id')&&this.$cookies.get('user_id')!=null){
        this.user_id=this.$cookies.get('user_id');
      };
      this.getInitData();
      this.getInitList();
    },
    methods: {
      goBack() {
        this.$router.back();
      },
      //查看评论
      evaluation(initData){
        this.$router.push({path: '/Commodity_evaluation', query:{id:initData.slShop.id}})

      },
      bannerMethod(){
        this.$toast('暂未开发');
      },
      //点击视频，播放/暂停
      playMethod() {
        if (this.$refs.myVideo.paused) {
          this.isShowPlay = false;
          this.$refs.myVideo.play();
        } else {
          this.isShowPlay = true;
          this.$refs.myVideo.pause();
        }
      },
      //判断视频是否播放完成
      endedMethod() {
        this.isShowPlay = true;
      },
      //初始化页面
      async getInitData() {
        let params = {
          scenicSpotId: this.scenicSpotId
        };
        const res = await this.$axios.post(this.$api.travelDetailsList, params);
        if (res.success) {
          this.initData = res.data;
          this.rating = (this.initData.slShop.rating / 2);
        } else {
          this.initData = {};
          this.$toast(res.msg);
        }
      },
      //初始化页面列表
      async getInitList() {
        let params = {
          pageSize: 10,
          pageNum:this.pageNum,
          scenicSpotId: this.scenicSpotId
        };
        const res = await this.$axios.post(this.$api.travelDetailsData, params);
        if (res.success) {
         this.initList=res.data;
          this.initList.forEach((i, index) => {
            if (typeof i.goods_spec_format=="string") {
              i.goods_spec_format = JSON.parse(i.goods_spec_format);
            }
          });
        } else {
          this.$toast(res.msg);
        }
      },
      //收藏
      async collectMethod(){
        let params = {
          user_id:this.user_id,
          shop_id:this.scenicSpotId,
          language:'zh'
        };
        const res = await this.$axios.post(this.$api.shopCollect, params);
        if (res.success) {
          this.iShow=!this.iShow
          this.$toast(res.msg);
        } else {
          this.$toast(res.msg);
        }
      },
      //跳转详情页
      toGoodsDetail(item) {
        this.$router.push({
          path: "./details_of_attractions", query: {Id:item.id, scenicSpotId: this.scenicSpotId,imgUrl:item.image_url}});
      },
      //跳转景点指南
      toggle(item){
        this.$router.push({path: "/playGuide", query: {Id:item.id, scenicSpotId: this.scenicSpotId,imgUrl:item.image_url}});
      },
      //分享
      shareMethod(){
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let params={
          url:window.location.href
        };
        if (isAndroid) {
          // window.WebViewJavascriptBridge.callHandler("AndroisVipFun",params,function() {});
        } else if (isiOS) {
          // this.$JsBridge.call('toPayMethod',params,function(response){
          //     alert(response);
          // });
          window.webkit.messageHandlers.toTravelDetails.postMessage(params);
        }
      },
      shareMethodBack(message){
        this.$toast(message);
      },

    }
  };
</script>

<style scoped>
  .empty{
    width:100%;
    margin-top:.4rem;
    text-align: center;
    font-size:.16rem;
    color:#999999;
  }
  .popContent{
    height:2.5rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  .popContent .date{
    width:80%;
    height:.5rem;
    background:#f2f2f2;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding:0 .15rem;
    border-radius: .05rem;
  }
  .popContent .selectNum{
    width:80%;
    height:.5rem;
    background:#f2f2f2;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding:0 .15rem;
    border-radius: .05rem;
  }
  .popContent .selectNum .right {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .popContent .selectNum .right img {
    width:.18rem;
  }
  .popContent .selectNum .right span {
    padding:0 .2rem;
  }
  .popContent .btn {
    width:80%;
    height:.5rem;
    border-radius: .5rem;
    background:#00bf46;
    color:#fff;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }

  .container{

  }
  .banner{
    width:100%;
    height: 2.15rem;
  }
  .van-swipe{
    height: 2.15rem;
  }
  .banner img {
    width:100%;
    height: 100%;
  }
  .video {
    width: 100%;
    /* height: 2.25rem; */
    position: relative;
  }
  .video .pic {
    position: absolute;
    width: 0.45rem;
    height: 0.45rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .video .pic img {
    width: 100%;
    height: 100%;
  }
  .headers {
    position: fixed;
    width: 100%;
    height: 0.44rem;
    left: 0;
    top: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    z-index: 100;
  }
  .headers .left{
    width:30%;
  }
  .headers .right{
    width:60%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .headers .right ul{overflow: hidden}
  .headers .right ul li{
    float: left;
    width: 0.35rem;
    height: 0.35rem;
    background:rgba(00,00,00,0.4) ;
    border-radius: 0.8rem;
    margin-left: 0.1rem;
    margin-top: 0.05rem;
  }
  .li_img {
    width: 0.18rem;
    margin: 0.05rem 0 0 0.08rem;
  }
  .li_img1 {
    width: 0.18rem;
    margin: 0.08rem 0 0 0.085rem;
  }
  .right_i {
    font-size: 0.22rem;
    margin: 0.05rem 0 0 0.07rem;
    color: #fff;
  }
  .i{
    font-size: 0.22rem;
    margin: 0.05rem 0 0 0.07rem;
    color: #01bf47;
  }
  #searchBar{width: 96%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: middle;-ms-flex-align: middle;align-items: middle;overflow: auto;box-sizing: border-box;background-color: white;margin-left: 0.15rem;}
  #searchBar div{text-align: center;font-size: 0.3rem;-ms-flex-negative: 0;flex-shrink: 0;padding:0.1rem 0.09rem 0.06rem 0;}
  #searchBar div img{width:0.85rem;height: 0.85rem;border-radius: 0.05rem;}
  #searchBar div p{text-align: center;font-size: 0.13rem;margin:0.08rem 0;width:0.85rem;
    display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
    overflow: hidden;
  }
  .guide{width: 100%;background-color: #fff;border-radius: 0.05rem;margin-top: 0.08rem;}
  .guide_con{width: 92%;margin: 0 auto;}
  .guide_con_p{line-height: 0.36rem;border-bottom: 1px solid #f2f2f2;font-size: 0.13rem;}

  .detail {
    width: 100%;
    padding: 0.15rem 0 0;
    background: #fff;
  }
  .detail .title {
    padding: 0 0.15rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .detail .action {
    width: 100%;
    height: 0.4rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eeeeee;
    padding: 0 0.15rem;
  }
  .detail .action .left {
    font-size: 0.14rem;
    color: #01bf47;
  }
  .detail .action .right {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    font-size: 0.14rem;
    color: #808080;
  }
  .detail .action .right span {
    padding-right: 0.12rem;
  }
  .detail .title .name {
    font-size: 0.16rem;
    color: #010101;
  }
  .detail .title .num {
    font-size: 0.15rem;
    color: #333333;
    min-width:1.3rem;
  }
  .detail .title .num span {
    color: #f44736;
  }
  .detail .subtitle {
    font-size: 0.14rem;
    color: #808080;
    margin-top: 0.12rem;
    padding: 0 0.15rem;

  }
  .detail .adress {
    padding: 0 0.15rem;
    font-size: 0.12rem;
    color: #01bf47;
    margin-top: 0.1rem;
    padding-bottom: 0.16rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .detail .adress .right {
    width:.6rem;
    height:.25rem;
    border:1px solid #01bf47;
    border-radius: 3px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }
  .detail .adress .right a{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    color:#01bf47;
  }
  .detail .adress img {
    width: 0.12rem;
  }
  .detail .adress span {
    padding-left: 0.06rem;
  }
  .list li {
    background: #fff;
    padding: .15rem 0.15rem;
    margin-top: 0.08rem;
    overflow: hidden;
    border-radius: 0.05rem;
  }
  .list li .left{
    width:1.05rem;
    height:1.05rem;
    border-radius: 0.05rem;
    float: left;
  }
  .list li .left img {
    width:100%;
    border-radius: 0.05rem;
  }
  .list li .center{
    width: 65%;
    float: right;
  }
  .list li .center .title {
    font-size:.15rem;
    color:#333333;
    font-weight: 600;
  }
  .list li .center .subtitle {
    font-size:.12rem;
    color:#8c8c8c;
    margin-top:.06rem;
    display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
    overflow: hidden;
    height: 0.4rem;
  }
  .Sold{
   padding-top: 0.13rem;
    font-size: 0.12rem;
  }
  .list li .center .price{
    margin-top:0.1rem;
    font-size:.13rem;
    color:#f44736;
  }
  .list li .right {
     width: 60%;
    float: left;
  }
  .list li .buy{
    width:.7rem;
    height:.3rem;
    background:#00bf47;
    color:#fff;
    border-radius: .05rem;
    text-align: center;
    line-height:.3rem;
    float: right;
    margin-top: 0.3rem;
  }
</style>



<style>
  .van-tab--active {
    color: #01bf47;
  }
  .van-search .van-cell {
    border-radius: 50px;
    background: #e8e8e8;
  }
</style>
